<template>
    <div class="container">
      <div class="container--item__header">
        <input type="checkbox" id="header--opiton" ref="headerCheckbox" @click="headerCheckbox">
        <label for="header--opiton"></label>
        <span>快捷商城自营</span>
      </div>
      <div class="container--body__commodityMsg" v-for="(item, index) in mallData" :key="index">
        <input type="checkbox" class="commodity--opiton"
               :value="item" v-model="cartids"
               @click="commodity"
               :id="item._id" ref="commodityOpiton">
        <label :for="item._id"></label>
        <img :src="item.prod.prodImage[0]" alt="#" class="container--img">
        <p class="container--item__title">{{item.prod.prodSubTitle}}</p>
        <span class="container--item__price">￥{{item.prod.currentPrice}}</span>
        <div class="container--item__num">
          <span class="container--item__subtract" @click="subtract(item)">-</span>
          <span class="container--item__digit container--item__subtract">{{item.num}}</span>
          <span class="container--item__plus container--item__subtract"
                @click="addNum(item)">+</span>
        </div>
      </div>

      <div class="container--item__bottom" v-show="Settlement">
        <input type="checkbox" class="commodity--opiton"
               id="commodityOpiton" ref="TotalOpiton" @click="Total">
        <label for="commodityOpiton"></label>
        <div class="container--body__text">
          <span class="container--item__total">合计：</span>
          <span class="container--total__num">￥{{totalPrice || 0}}</span>
          <span class="container--item__freight">不含运费</span>
          <span class="container--item__discounts">以优惠金额：</span>
          <span class="container--discounts__num">￥0</span>
        </div>
        <span class="container--item__btn" @click="account">结算({{cartids.length}})</span>
      </div>
      <div class="container--item__bottom" v-show="!Settlement">
        <span class="container--item__btn container--item__btnColor"
              @click="del">删除({{cartids.length}})</span>
      </div>
    </div>
</template>

<script>
import { Debounce } from '../publicFunction/index';
/* eslint-disable*/
export default {
  name: 'shoppingCart',
  data() {
    return {
      cartids: [],
      Settlement: true,
      mallData: null,
      arrId: [],
      detailPageCommodityMsg: null,
      arrIndex: [],
      statusBoole: false,
    };
  },
  methods: {
    del() {
      if (this.cartids[0]) {
        this.cartids.forEach(v => this.arrId.push(v._id));
        this.$api.delCart({ cartids: this.arrId })
          .then((data) => {
            if (data.data.code === 1) {
              this.$bus.$emit('delCommodit');
              this.$api.getCart().then(data => {
                this.mallData = data.data.data;
                this.arrId = [];
                this.cartids = [];
                this.statusBoole = !this.statusBoole;
              });
              console.log(this.mallData);
            }
          })
          .catch(error => console.log(error));
      }
    },
    headerCheckbox() {
      if (this.$refs.headerCheckbox.checked) {
        this.$refs.TotalOpiton ? this.$refs.TotalOpiton.checked = true : '';
        this.cartids = this.mallData;
      } else {
        this.$refs.TotalOpiton ? this.$refs.TotalOpiton.checked = false : '';
        this.cartids = [];
      }
    },
    commodity() {
      setTimeout(() => {
        if (this.cartids.length === 0) {
          this.$refs.headerCheckbox.checked = false;
          this.$refs.TotalOpiton ? this.$refs.TotalOpiton.checked = false : '';
        } else {
          this.$refs.TotalOpiton ? this.$refs.TotalOpiton.checked = true : '';
        }
      }, 100);
    },
    clickDebounce: Debounce(function (item) {
      this.$api.updateNum({ cartid: item._id, num: item.num })
        .then(data => console.log(data))
        .catch(error => console.log(error));
    }, 300),
    Total() {
      if (this.$refs.TotalOpiton.checked) {
        this.cartids = this.mallData;
      } else {
        this.cartids = [];
        this.$refs.headerCheckbox.checked = false;
      }
    },
    subtract(item) {
      if (item.num <= 1) {
        item.num = 0;
        this.$api.delCart({ cartids: item._id })
          .then(data => console.log(data))
          .catch(error => console.log(error));
      } else {
        item.num -= 1;
        this.clickDebounce(item);
      }
    },
    addNum(item) {
      item.num >= 99 ? item.num = 99 : item.num += 1;
      this.clickDebounce(item);
    },
    account() {
      if (this.cartids[0]) {
        this.$router.push({
          name: 'account',
          params: { id: JSON.stringify({ cartids: this.cartids, totalPrice: this.totalPrice }) },
        });
      } else {
        this.$popUp({
          message: '您还没有选择商品',
        });
      }
    },
  },
  computed: {
    totalPrice() {
      return this.cartids.reduce(function (prev, current) {
        return prev + (+current.prod.currentPrice * +current.num);
      }, 0);
    },
  },
  mounted() {
    this.$bus.$on('edit', () => {
      this.Settlement = !this.Settlement;
      if (this.Settlement && this.cartids.length !== 0 && this.$refs.TotalOpiton) this.$refs.TotalOpiton.checked = true;
    });
  },
  created() {
    this.$api.getCart()
      .then((data) => {
        console.log(data);
        this.mallData = data.data.data;
      })
      .catch(error => console.log(error));
  },
  updated() {
    if (this.statusBoole) {
      this.$refs.TotalOpiton.checked = false;
      this.$refs.headerCheckbox.checked = false;
      this.statusBoole = !this.statusBoole;
    }
  },
};
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
  font-size: 0;
}
.container{
  width: 100vw;
  height: 100vh;
  background-color: #f0eff5;
  .container--item__header{
    background-color: #fff;
    width: 100vw;
    line-height: (82/75) + rem;
    border-bottom: 1px solid #ccc;
    span{
      font-size: .35rem;
      margin-left: .35rem;
      vertical-align: middle;
    }
  }
  .container--body__commodityMsg{
    background-color: #fff;
    position: relative;
    width: 100vw;
    height: (232/75) + rem;
    border-bottom: 1px solid #ccc;
    .container--img{
      width: 2.5rem;
      height: 2.5rem;
      display: inline-block;
      vertical-align: middle;
      border:  1px solid #ccc;
      margin-left: .35rem;
      margin-top: .296665rem;
    }
    .container--item__title{
      font-size: .35rem;
      width: 5.7rem;
      vertical-align: top;
      display: inline-block;
      margin-top: .296665rem;
      margin-left: .35rem;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .container--item__price{
      font-size: .4rem;
      color: #eb4b27;
      position: absolute;
      left: 4rem;
      bottom: (54/75) + rem;
    }
    .container--item__num{
      width: (184/75) + rem;
      height: (55/75) + rem;
      border:  1px solid #ccc;
      position: absolute;
      right: .7rem;
      bottom: (20/75) + rem;
      border-radius: 5px;
      .container--item__subtract{
        width: (53/75) + rem;
        display: inline-block;
        height: 100%;
        line-height: (55/75) + rem;
        border-right: 1px solid #ccc;
        text-align: center;
        font-size: .5rem;
      }
      .container--item__digit{
        border:  none;
        width: 1rem;
        font-size: .4rem;
      }
      .container--item__plus{
        float: right;
        border-right: none;
        border-left: 1px solid #ccc;
        box-sizing: border-box;
      }
    }
  }
  .container--item__bottom{
    background-color: #fff;
    position: fixed;
    bottom: 0;
    display: inline-block;
    width: 100vw;
    height: (92/75) + rem;
    .container--body__text{
      vertical-align: middle;
      display: inline-block;
      .container--item__total{
        margin-top: .2rem;
        font-size: .35rem;
        margin-left: .35rem;
        display: inline-block;
      }
      .container--total__num{
        font-size: .4rem;
        color: #ea4120;
      }
      .container--item__freight{
        font-size: .35rem;
        margin-left: .35rem;
        color: #a4a4a4;
      }
      .container--item__discounts{
        font-size: .35rem;
        display: block;
        margin-left: .35rem;
      }
      .container--discounts__num{
        font-size: .35rem;
        display: inline-block;
        position: relative;
        left: 2.5rem;
        top: -.38rem;
      }
    }
    .container--item__btn{
      width: (219/75) + rem;
      background-color: #458cf8;
      color: #fff;
      text-align: center;
      line-height: (92/75) + rem;
      font-size: .35rem;
      display: inline-block;
      position: absolute;
      right: 0;
    }
    .container--item__btnColor{
      background-color: #eb5232;
    }
  }
}
#header--opiton,.commodity--opiton{
  display: none;
}
#header--opiton + label,.commodity--opiton + label{
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border: 1px solid #ccc;
  border-radius: 50%;
  box-sizing: border-box;
  vertical-align: middle;
  margin-left: .35rem;
}
#header--opiton:checked + label,.commodity--opiton:checked + label{
  border: none;
  background-image: url("../assets/register/consent.png");
  background-size: 100%;
}
</style>
